<template>
	<view>
		<uni-search-bar :placeholder="$t('baseCommon.message.enterAccountOrName')" @confirm="search1" @cancel="search2" />
		<view class="wrapper">
			<view class="user-box">
				<view v-if="list.length > 0">
					<view class="user-list-item" v-for="(item, index) in list" :key="index" @click="listTap(item)">
						{{item.account}}: {{item.name}}
					</view>
				</view>
				<view v-else class="no-data">{{$t('baseCommon.message.noContentFound')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryUserByGroup } from '@/api/platform/common.js'

	export default {
		data() {
			return {
				type: '',
				list: [],
				allList: []
			}
		},
		onLoad(params) {
			this.type = params.type
			this.init()
		},
		methods: {
			init() {
				let params = []
				queryUserByGroup(params).then(res => {
					this.list = res.data.dataResult
					this.allList = this.list
				})
			},
			search1(e) {
				if (e.value) {
					var that = this
					var data = that.allList
					that.list = []
					for (var i = 0, len = data.length; i < len; i++) {
						if (data[i].name.indexOf(e.value) >= 0 || data[i].account.indexOf(e.value) >= 0) {
							that.list.push(data[i])
						}
					}
				} else {
					this.init()
				}
			},
			search2(e) {
				this.init()
			},
			listTap(item) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectUser', this.type, item);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.uni-searchbar {
		border-bottom: 1px solid #eee;
	}

	.user-list-item {
		padding: 16px;
		border-bottom: 1px #eee solid;
		font-size: 14px;
	}

	.no-data {
		text-align: center;
		color: #999;
		margin: 50px;
	}
</style>
